<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <script src="/js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="public :: public_top"></div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">日前交易</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/sjxh/chart">表格</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <div class="layui-form" style="text-align: center">
            <div style="margin: 15px 15px" class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">开始日期：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="date1" placeholder="yyyy-MM-dd">
                    </div>
                    <label class="layui-form-label">结束日期：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="date2" placeholder="yyyy-MM-dd">
                    </div>
                    <input id="bt" onclick="query()" type="button" data-abc="reload1"
                           class="layui-btn layui-btn-primary" value="查 询"/></div>
            </div>
        </div>
        <div class="layui-row layui-col-space12">
            <div class="layui-col-md9">
                <div class="layui-panel">
                    <div id="chart1" style="padding: 30px;width: 100%;height: 400px"></div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <span style="display: block;text-align: center;margin-top: 10px;margin-bottom: 10px">统计信息</span>
                    <div id="table1" style="padding: 0px;width: 100%;height: 100%"></div>
                </div>
                <div class="layui-panel">
                    <div id="chart2" style="padding: 10px;width: 100%;height: 310px">饼状图</div>
                </div>
                <!--                <div class="layui-panel">-->

                <!--                </div>-->
            </div>
        </div>
    </div>
    <!--    <div class="layui-footer">-->
    <!--        &lt;!&ndash; 底部固定区域 &ndash;&gt;-->
    <!--        底部固定区域-->
    <!--    </div>-->
</div>

<script src="/js/echarts.min.js" type="text/javascript"></script>
<script>
    function query() {
        getSituationDay();
        getSituationDay2();
    }

    function getSituationDay() {
        var pdate1 = $("#date1").val();
        var pdate2 = $("#date2").val();
        $.ajax({
            url: "/sjxh/da/getIsDaDeal",
            method: "GET",
            data: {
                start: pdate1,
                end: pdate2
            },
            dataType: "JSON",
            success: function (data) {
                console.log(data);
                chart(data);
            }
        })
    };

    function getSituationDay2() {
        var pdate1 = $("#date1").val();
        var pdate2 = $("#date2").val();
        $.ajax({
            url: "/sjxh/da/getIsDaDealTips",
            method: "GET",
            data: {
                start: pdate1,
                end: pdate2
            },
            dataType: "JSON",
            success: function (data) {
                chart2(data);
            }
        })
    };

    function chart(data) {
        var myChart = echarts.init(document.getElementById("chart1"));
        myChart.clear();
        var option = {
            title: {
                text: '日前交易情况'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['日前成交']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: data.xAxisList[0]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '日前成交',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: data.data[0]
                }
            ]
        }
        option && myChart.setOption(option);
    };

    function chart2(data) {
        var myChart = echarts.init(document.getElementById("chart2"));
        myChart.clear();
        var option = {
            title: {
                // text: '日前交易饼图',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: data.data[0][1], name: '成交天数'},
                        {value: data.data[0][2], name: '未成交天数'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
        option && myChart.setOption(option);
    };
</script>

<script src="/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['element', 'layer', 'util', 'laydate', 'table'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$
            , laydate = layui.laydate
            , table = layui.table;
        // $(document).ready(function () {
        //     laydate.render({
        //         elem: '#date1',
        //         format: 'yyyy-MM-dd',
        //         value: new Date()
        //     });
        //     laydate.render({
        //         elem: '#date2',
        //         format: 'yyyy-MM-dd',
        //         value: new Date()
        //     });
        // });
        //常规用法
        laydate.render({
            elem: '#date1',
            format: 'yyyy-MM-dd',
            value: new Date()
        });
        laydate.render({
            elem: '#date2',
            format: 'yyyy-MM-dd',
            value: new Date()
        });
        var pdate1 = $('#date1').val();
        var pdate2 = $('#date2').val();
        table.render({
            elem: '#table1'
            , url: '/sjxh/da/getIsDaDealTips'
            , where: {
                start: pdate1,
                end: pdate2
            }
            , page: false
            , id: 'tableId'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , id: 'testTable'
            , cols: [
                [
                    {
                        field: '0', align: 'center', title: '总天数', templet: function (d) {
                            return '<div style="text-align: center">' + d[0] + '</div>'
                        }
                    }
                    , {
                    field: '1', align: 'center', title: '成交天数', templet: function (d) {
                        return '<div style="text-align: center">' + d[1] + '</div>'
                    }
                }
                    , {
                    field: '2', align: 'center', title: '未成交天数', templet: function (d) {
                        return '<div style="text-align: center">' + d[2] + '</div>'
                    }
                }
                ]
            ],
            align: 'center'
        });
        var active = {
            reload1: function () {
                var pdate1 = $('#date1').val();
                var pdate2 = $('#date2').val();
                table.reload('testTable', {
                    where: {
                        start: pdate1,
                        end: pdate2
                    }
                });
            }
        };
        $('#bt').on('click', function () {//绑定点击事件
            var type = $(this).data('abc');
            active[type] ? active[type].call(this) : '';
        });
        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            , menuRight: function () {
                layer.open({
                    type: 1
                    , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    , area: ['260px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                });
            }
        });
    });
</script>
</body>
</html>